{% extends 'base.html' %}

{% load staticfiles %}

{% block custom_css %}
    <style>
        #id_captcha_1 {
            width: 50%;
            margin-right: 10px;
        }
    </style>
{% endblock %}

{% block title %}登录-学厨网{% endblock %}

{% block content %}
    <div class="container mycontent" style="padding-top: 80px;">
        <div class="col-sm-6 col-lg-6 col-lg-offset-3" style="padding: 0px 40px 40px;">
            {% if msg %}
                <div class="alert alert-danger" role="alert">{{ msg }}</div>
            {% endif %}
            <div class="page-header">
                <h3>登录</h3>
            </div>
            <form action="{% url 'login' %}" method="post" autocomplete="off">
                <div class="input-group input-group-lg" style="margin-top: 20px;">
                    <span class="input-group-addon" id="basic-addon1">用户名</span>
                    {{ form.username }}
                </div>
                <div class="input-group input-group-lg" style="margin-top: 30px;">
                    <span class="input-group-addon" id="basic-addon2" style="padding-right: 19px;">密&nbsp;&nbsp;&nbsp;码</span>
                    {{ form.password }}
                </div>
                <div class="input-group input-group-lg" style="margin-top: 30px;">
                    <span class="input-group-addon yanzengma" id="basic-addon1">验证码</span>
                    {{ form.captcha }}
                </div>
                <div class="pull-right">
                    <a href="{% url 'forget_pwd' %}">忘记密码？</a>
                </div>

                {% csrf_token %}
                <button type="submit" class="btn btn-primary btn-lg center-block"
                        style="margin-top: 30px;width: 100%;" id="login_butten">登录
                </button>

            </form>
        </div>
    </div>
    <script>
        $(function () {
            $('.captcha').css({
                'cursor': 'pointer'
            });
            $('.captcha').click(function () {
                console.log('click');
                $.getJSON("/captcha/refresh/",
                    function (result) {
                        $('.captcha').attr('src', result['image_url']);
                        $('#id_captcha_0').val(result['key'])
                    });
            });
            //$('#id_captcha_1').blur(function () {
            // #id_captcha_1为输入框的id，当该输入框失去焦点是触发函数
            //json_data = {
            //'response': $('#id_captcha_1').val(),  // 获取输入框和隐藏字段id_captcha_0的数值
            //'hashkey': $('#id_captcha_0').val()
            // }
            // $.getJSON('/ajax_val', json_data, function (data) { //ajax发送            $('#captcha_status').remove()
            //    if (data['status']) { //status返回1为验证码正确， status返回0为验证码错误， 在输入框的后面写入提示信息
            //        $('.yanzengma').css('border', '1px solid #ccc');
            //       $('.yanzengma').css('border-right', 'none');
            //       $('#id_captcha_1').css('border', '1px solid #ccc');
            //    } else {
            //        $('.yanzengma').css('border', '1px solid red');
            //        $('.yanzengma').css('border-right', 'none');
            //      $('#id_captcha_1').css('border', '1px solid red');

            //   }
            // });
            //});
        });
    </script>

{% endblock %}